<template>
    <div>
        <el-divider><i class="el-icon-user-solid"></i></el-divider>
        <el-row align="center" style="padding-inline: 70px">
            <el-col :span="12">
                <el-card shadow="always"class="ss">
                    <el-divider><i class="el-icon-user"></i></el-divider>
                    用户名：{{queryInfo.query}}
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always"class="ss">
                    <el-divider><i class="el-icon-plus"></i></el-divider>
                    <el-button size="mini" @click="Shenqing()" style="background-color: #eee9f3;width: 100px;">申请专利</el-button>
                    <download-excel class="export-excel-wrapper" :data="patentList" :fields="json_fields" title="专利数据"
                                    name="专利数据.xls" style="padding-top: 10px;">
                        <el-button size="mini" style="background-color: #eee9f3;width: 100px;">导出为EXCEL</el-button>
                    </download-excel>
                </el-card>
            </el-col>
        </el-row>
        <!-- 卡片视图区域 -->
        <el-divider><i class="el-icon-s-order"></i></el-divider>
        <el-card>
            <!-- 列表区域 -->
            <el-table stripe border :data="patentList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                <el-table-column label="专利号" prop="patentID"></el-table-column>
                <el-table-column label="专利名称" prop="patentname"></el-table-column>
                <el-table-column label="专利类型" prop="patentType"></el-table-column>
                <el-table-column label="发明人" prop="inventors"></el-table-column>
                <el-table-column label="申请日期" prop="applytime"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="专利有效期" prop="times"></el-table-column>
                <el-table-column label="描述" prop="pdescribe"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click="showEditDialog(scope.row.patentID)"></el-button>
                        <!-- scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                @click="DeleteById(scope.$index, scope.row)"></el-button>
                        <el-tooltip class="item" effect="dark" content="转让" placement="bottom">
                            <el-button @click="showZhuanRangDialog(scope.row.patentID)" size="small" type="danger" icon="el-icon-sort" circle></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="patentList.length">
            </el-pagination>
        </el-card>
        <el-divider>申请列表</el-divider>
        <el-card>
            <!--申请列表区域 -->
            <el-table stripe border :data="patentCheckList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                <el-table-column label="专利号" prop="patentID"></el-table-column>
                <el-table-column label="专利名称" prop="patentname"></el-table-column>
                <el-table-column label="专利类型" prop="patentType"></el-table-column>
                <el-table-column label="发明人" prop="inventors"></el-table-column>
                <el-table-column label="申请日期" prop="applytime"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="专利有效期" prop="times"></el-table-column>
                <el-table-column label="描述" prop="pdescribe"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                plain
                                @click="DeleteApply(scope.row.patentID)">撤销申请</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="patentCheckList.length">
            </el-pagination>
        </el-card>
        <!-- 修改用户对话框 -->
        <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @colse="editDialogClosed">
            <el-form ref="editFormRef" :model="editForm" label-width="70px">
                <el-form-item label="专利号" prop="patentID">
                    <el-input v-model="editForm.patentID" disabled></el-input>
                </el-form-item>
                <el-form-item label="专利名" prop="patentname">
                    <el-input type="text" v-model="editForm.patentname"></el-input>
                </el-form-item>
                <el-form-item label="发明人" prop="inventors">
                    <el-input type="text" v-model="editForm.inventors"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="pdescribe">
                    <el-input v-model="editForm.pdescribe"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
        </el-dialog>

        <el-dialog title="转让" :visible.sync="zhuanrangDialogVisible" width="50%" @colse="zhuanDialogClosed">
            <el-form ref="zhuanrangFormRef" :model="zhuanrangForm" label-width="70px">
                <el-form-item label="转让给：">
                    <el-input type="text" v-model="zhuanrangForm.patenter"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="zhuanrangDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="zhuanRangInfo">确 定</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                patentList: [],
                patentCheckList:[],
                queryInfo: {
                    query: '',
                },
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5,// 每页的数据条数
                // 控制修改用户对话框显示/隐藏
                editDialogVisible: false,
                zhuanrangDialogVisible:false,
                // 修改用户信息
                editForm: {
                    patentID: "",
                    patentname: "",
                    inventors: '',
                    address: '',
                    pdescribe: '',
                },
                zhuanrangForm:{
                  patenter:"",
                },

                json_fields: {
                    "专利号": "patentID",
                    "指标点": "patentname",
                    "专利类型": "patentType",
                    "发明人": "inventors",
                    "申请日期": "applytime",
                    "地址": "address",
                    "专利有效期": "times",
                    "描述": "pdescribe",
                },
                json_meta: [
                    [{
                        " key ": " charset ",
                        " value ": " utf- 8 "
                    }]
                ],
            }
        },

        created() {
            this.queryInfo.query = window.sessionStorage.getItem('username')
            this.getPatentList()
            this.getPatentCheckList()
        },
        methods: {
            Shenqing() {
                this.$router.push({path: "/softApply"});
            },
            async getPatentList() {
                const {data: res_j} = await this.$http.get("patentList", {params: this.queryInfo});
                console.log(res_j);
                this.patentList = res_j.groups;
                /*var res = JSON.parse(res_j.groups);*///json转换为js对象
                /*由于版本升级，所以不用解析为js对象可以直接调用*/
                /*if(res_j.flag !=200){
                    return this.$message.error("获取群组列表失败！");
                }*/
            },
            async getPatentCheckList() {
                const {data: res_j} = await this.$http.get("patentCheckList", {params: this.queryInfo});
                console.log(res_j);
                this.patentCheckList = res_j.groups;
            },
            async DeleteById(index, row) {
                const confirmResult = await this.$confirm("此操作将永久删除该文件, 是否继续?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning"
                }).catch(err => err)
                if (confirmResult != 'confirm') {
                    return this.$message.info("已取消删除");
                }
                console.log(index, row);
                this.queryInfo.query = row.patentID;
                console.log("PatentID" + this.queryInfo.query)
                const {data: res_d} = await this.$http.get("deleteById", {params: this.queryInfo});
                const res = JSON.parse(JSON.stringify(res_d));//转换为json对象
                console.log(res);
                if (res == "ok") {
                    this.$message.success("删除成功");
                    this.$router.go(0)
                } else {
                    this.$message.error("删除失败");
                }
            },
            async DeleteApply(patentID) {
                const {data: res_d} = await this.$http.get("deleteId?id=" + patentID);
                const res = JSON.parse(JSON.stringify(res_d));//转换为json对象
                console.log(res);
                if (res == "ok") {
                    this.$message.success("成功");
                    this.$router.go(0)
                } else {
                    this.$message.error("失败");
                }
            },
            // 展示修改框
            async showEditDialog(patentID) {
                const {data: res} = await this.$http.get("getUpdate?id=" + patentID);
                this.editForm = res;
                this.editDialogVisible = true;
            },
            // 关闭窗口
            editDialogClosed() {
                this.$refs.editFormRef.resetFields();
            },
            // 确认修改
            editUserInfo() {
                this.$refs.editFormRef.validate(async valid => {
                    console.log(valid + "****", this.editForm);
                    if (!valid) return;
                    // 发起请求
                    const {data: res} = await this.$http.post("editPatent", this.editForm);
                    console.log(res);
                    if (res != "ok") return this.$message.error("操作失败！！！");
                    this.$message.success("操作成功！！！");
                    //隐藏
                    this.editDialogVisible = false;
                    this.$router.go(0)
                });
            },

            async showZhuanRangDialog(patentID) {
                const {data: res} = await this.$http.get("getUpdate?id=" + patentID);
                this.zhuanrangForm = res;
                this.zhuanrangDialogVisible = true;
            },
            zhuanDialogClosed() {
                this.$refs.zhuanrangFormRef.resetFields();
            },
            // 确认修改
            zhuanRangInfo() {
                this.$refs.zhuanrangFormRef.validate(async valid => {
                    console.log(valid + "****", this.zhuanrangForm);
                    if (!valid) return;
                    // 发起请求
                    const {data: res} = await this.$http.post("zhuanrangPatent", this.zhuanrangForm);
                    console.log(res);
                    if (res != "ok") return this.$message.error("操作失败！！！");
                    this.$message.success("操作成功！！！");
                    //隐藏
                    this.zhuanrangDialogVisible = false;
                    this.$router.go(0)
                });
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },

        },
    }
</script>

<style lang="less" scoped>
    .el-breadcrumb {
        margin-top: 10px;
        margin-left: 8px;
        margin-bottom: 10px;
        font-size: 15px;
    }

    .el-card {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    }
    .ss{
        height: 150px;
        width: 550px;
        align-items: center;
        /*background-color: #c3fcf5;*/
        background-image: linear-gradient(-90deg, #86dfef 0%, #679dec 100%);
    }
    .el-divider--horizontal{
        margin: 8px 0;
        border-top: 0px dashed;
        background-image: linear-gradient(to right, #f8d007 0%, #5c09e0 100%);
    }

</style>
